// import { createVNode, render } from "vue";
import Vue from 'vue'
import nullValueFill from './nodeComponents/dataExtraction.vue'

export default function register(lf) {
  lf.register('dataExtraction', ({ HtmlNode, HtmlNodeModel, h }) => {
    class Node extends HtmlNode {
      setHtml(rootEl) {
        const { properties } = this.props.model
        const el = document.createElement('div')
        rootEl.innerHTML = ''
        rootEl.appendChild(el)

        const MyComponent = Vue.extend(nullValueFill)
        const instance = new MyComponent({
          // 传递 props
          propsData: { name: properties.text },
        })
        instance.$mount(el)

        // const myApp = createVNode(nullValueFill, {
        //     props: {
        //         name: properties.text,
        //     },
        // });
        // render(myApp, el)
      }
    }
    class Model extends HtmlNodeModel {
      constructor(data, graphModel) {
        data.text = {
          value: (data.text && data.text.value) || '普通节点',
          x: data.x,
          y: data.y + 50,
        }
        super(data, graphModel)
      }
      initNodeData(data) {
        if (data.text) {
          data.text.editable = false
        }
        super.initNodeData(data)
        const width = 62
        const height = 62
        this.width = width
        this.height = height
        this.anchorsOffset = [
          [width / 2, 0],
          [0, height / 2],
          [-width / 2, 0],
          [0, -height / 2],
        ]
      }
    }
    return {
      view: Node,
      model: Model,
    }
  })
}
